<template>
  <!-- 领取弹框 -->
  <uni-popup ref="popup" type="center" style="z-index: 910">
    <view class="package column">
      <view style="font-size: 36rpx;">输入手机号</view>
      <view style="font-size: 26rpx;color:#999;margin:20rpx 0px 30rpx">输入手机号和验证码才可领取货品</view>
      <view class="bg center"><input type="number" placeholder="请输入手机号码" maxlength="11" v-model="phone" /></view>
      <view class="space-between bg">
        <input type="number" placeholder="请输入验证码" v-model="code" />
        <view v-show="canSendcode" class="_code" @click="toSendCode()">验证码</view>
        <view v-show="!canSendcode" class="_code">{{ time }}s</view>
      </view>
      <view class="tel center" @click="telCall('400-109-1606')">有问题请致电：400-109-1606</view>
      <view class="but" @click="convert()">立即兑换</view>
    </view>
  </uni-popup>
  <!-- 领取成功弹框 -->
  <uni-popup ref="collect" type="center" style="z-index: 910">
    <view class="package column">
      <uni-icons type="checkbox-filled" size="80" color="#3994FC"></uni-icons>
      <view style="font-size: 42rpx;">领取成功</view>
      <view style="margin:30rpx 0px 60rpx">货品将在1-15分钟内到账，请注意查看</view>
      <view class="tel center" @click="telCall('400-109-1606')">有问题请致电：400-109-1606</view>
      <view class="but" style="background: #333333;" @click="close()">我知道了</view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref, onBeforeUnmount } from 'vue';
  import { toPublish } from '@mqtt';
  import { telCall } from '@/utils/copyText';
  import { errorToast, successToast, showLoading } from '@/utils/prompt';
  let interval = 0;
  const popup = ref(null)
  const collect = ref(null)
  const orderId = ref()
  const phone = ref('');
  const code = ref('');
  const time = ref(60)
  const canSendcode = ref(true)
  const emit = defineEmits(['submit']);
  const props = defineProps({
    id: {
      type: Number,
    }
  });
  function phoneTel() {
    const mobile = /^1[3-9]\d{9}$/;
    if (!mobile.test(phone.value)) {
      errorToast('请输入正确的手机号码');
      return false;
    } else {
      return true;
    }
  }
  //获取验证码
  function toSendCode() {
    if (phone.value && !phoneTel()) {
      return;
    }
    showLoading()
    const payload = {
      event: 'notice',
      mobile: phone.value,
    };
    toPublish('driver/sendSms', payload, (obj : any) => {
      successToast('发送成功');
      canSendcode.value = false
      countdown()
    });
  }
  function countdown() {
    interval = setInterval(() => {
      time.value--
      if (time.value === 0) {
        canSendcode.value = true
        clearInterval(interval);
      }
    }, 1000);
  }
  function convert() {
    if (!code.value) {
      errorToast('请输入验证码');
      return;
    }
    showLoading()
    const payload = {
      id: props.id,
      phone: phone.value,
      code: code.value
    };
    toPublish('score/doDuihuan', payload, (obj : any) => {
      const { code, msg, data } = obj;
      if (code === 1) {
        orderId.value = data.order_id
        popup.value.close()
        collect.value.open()
        emit('submit');
      } else {
        errorToast(msg);
      }
    });

  }
  function open() {
    phone.value = ''
    code.value = ''
    popup.value.open()
  }
  function close() {
    collect.value.close();
  }
  onBeforeUnmount(() => {
    clearInterval(interval);
  });
  defineExpose({
    open,
  });
</script>
<style scoped lang="less">
  .package {
    width: 600rpx;
    height: 701rpx;
    // justify-content: space-around;
  }

  .bg {
    width: 523rpx;
    height: 78rpx;
    background: #eee;
    border-radius: 5px;
    margin-top: 20rpx;

    input {
      margin-left: 15rpx;
    }
  }

  .tel {
    width: 523rpx;
    height: 54rpx;
    background: #eee;
    border-radius: 5px;
    color: #1B91FF;
    justify-content: center;
    margin: 67rpx 0px 0px;
  }

  ._code {
    width: 156rpx;
    height: 78rpx;
    background: linear-gradient(-48deg, #4FB3FE, #3994FC);
    border-radius: 5px;
    text-align: center;
    line-height: 78rpx;
    color: #FFFFFF;
  }

  .but {
    width: 406rpx;
    height: 86rpx;
    background: linear-gradient(-48deg, #4FB3FE, #3994FC);
    border-radius: 43rpx;
    text-align: center;
    line-height: 86rpx;
    font-size: 36rpx;
    color: #FFFFFF;
    margin: 50rpx 0px;
  }
</style>